<template>
	<view class="container">
		<view class="tabs u-flex">
			<image :src="icon" class="icon"></image>
			<view :class="['tab u-flex',tabsList.length > 3?'u-flex-between gap-0':'gap']">
				<view :class="[activeIndex === index ?'li-active':'li']" v-for="(item,index) in tabsList" :key="item.id"
					@click="tabsClick(item,index)">
					<span>{{item.name}}</span>
				</view>
			</view>
		</view>
		<loading-page mode="zoom" height="400rpx" :show="medicalCosmetologyZoneLoading"></loading-page>
		<view class="product u-flex"
			v-if="!medicalCosmetologyZoneLoading &&medicalCosmetologyZoneProductList && medicalCosmetologyZoneProductList.length > 0">
			<view class="li" v-for="(val,index) in medicalCosmetologyZoneProductList" :key="val.id"
				@click.stop="$navigateTo('/subPackages/product/product-detail?product_id=' + val.id)">
				<view class="li-img">
					<zero-lazy-load :height="228" imgMode='aspectFill' :image="val.cover_image"
						class="img"></zero-lazy-load>
				</view>
				<view class="footer u-flex-between">
					<view>
						<span class="price">
							<span class="price-icon">¥</span>
							<span class="price-text">{{val.minPriceSpec.price}}</span>
						</span>
						<span class="origin-price">{{val.minPriceSpec.original_price}}</span>
					</view>
					<view class="addShop" @click.stop="addShop(val)">
						<u-icon name="shopping-cart" color="#4B4B4B" size="22"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<empty :show="!medicalCosmetologyZoneLoading && medicalCosmetologyZoneProductList.length == 0" height="200">
		</empty>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				icon: 'https://qn.mtj.cdydsy.com/user_client/new-images/hot.png',
				activeIndex: 0,
				isShopCart: true
			};
		},
		computed: {
			...mapState({
				medicalCosmetologyZoneLoading: (state) => state.index.medicalCosmetologyZoneLoading,
				medicalCosmetologyZoneProductList: (state) => state.index.medicalCosmetologyZoneProductList,
				medicalCosmetologyZoneList: (state) => state.index.medicalCosmetologyZoneList,
			}),
			tabsList() {
				return this.medicalCosmetologyZoneList
			}
		},
		methods: {
			...mapMutations('index', ['setMedicalCosmetologyZoneLoading']),
			...mapActions('index', ['getMedicalCosmetologyZone']),
			tabsClick(e, index) {
				uni.showLoading({
					title: '加载中...'
				})
				this.setMedicalCosmetologyZoneLoading(true)
				this.activeIndex = index
				this.getMedicalCosmetologyZone(this.activeIndex)
					.finally(() => {
						uni.hideLoading(); // 不管请求成功还是失败，都隐藏加载提示
					})
					.catch(ex => {
						this.$errorToast(ex);
					});
			},
			// 添加购物车
			addShop(e) {
				if (!this.$isLogin()) {
					this.$navigateTo()
					return false;
				}
				uni.showLoading({
					title: '添加中...'
				})
				if (this.isShopCart == false) return;
				this.isShopCart = false;
				this.$post("shopCart/addReduce", {
					product_type: 1, // 普通商品
					type: 1, // 加1
					product_id: e.id, // 商品id
					product_spec_id: e.minPriceSpec.id, // 规格id
				}).then(res => {
					this.isShopCart = true;
					this.$showToast(res.msg);
					if (res.code == 200) {
						// 更新购物车总数
						this.$store.commit('shopCart/setShopCartNumber', res.data.total);
						// 更新已购物车
						this.$store.commit('shopCart/setIsUpdate');
					}
					uni.hideLoading();
				}).catch(ex => {
					this.isShopCart = true;
					uni.hideLoading();
					this.$errorToast(ex)
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding-top: 40rpx;

		.tabs {

			.icon {
				width: 94rpx;
				height: 28rpx;
				display: block;
				margin-right: 6rpx;
			}

			.tab {
				flex: 1;

				.li {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #7D7D7D;
					flex-shrink: 0;
				}

				.li-active {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 600;
					font-size: 36rpx;
					color: #000000;
				}
			}

			.gap-0 {
				gap: 0;
			}

			.gap {
				gap: 40rpx;
			}
		}

		.product {
			padding-top: 30rpx;
			overflow-x: auto;
			gap: 14rpx;

			.li {
				width: 222rpx;

				.li-img {
					position: relative;

					.shop-618 {
						width: 104rpx;
						height: 96rpx;
						display: block;
						position: absolute;
						top: 0;
						right: 0;
						z-index: 9;
					}

					.img {
						width: 222rpx;
						display: block;
					}

					.shop-bybt {
						width: 100rpx;
						height: 54rpx;
						display: block;
						position: absolute;
						bottom: 0;
						left: 0;
						z-index: 9;
					}
				}

				.text {
					padding-top: 20rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 24rpx;
					color: #050505;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}

				.footer {
					padding-top: 20rpx;

					.price {
						.price-icon {
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							font-size: 20rpx;
							color: #CC242B;
						}

						.price-text {
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							font-size: 28rpx;
							color: #CC242B;
						}
					}

					.origin-price {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 20rpx;
						color: #757575;
						text-decoration: line-through;
						padding-left: 10rpx;
					}
				}
			}
		}
	}
</style>